<template>
  <div id="app">
    <div class="tabs">
      <listleft :tabs="tabs" :currentIndex="currentIndex" @deliverIndex="changelist"></listleft>
      <listright :tabs="tabs" :currentIndex="currentIndex"></listright>
    </div>
  </div>
</template>

<script>

import listleft from './components/listleft.vue';
import listright from './components/listright.vue';
import pic1 from './assets/1.png';
import pic2 from './assets/2.png';
import pic3 from './assets/3.png';
export default {
  components:{
    listright,
    listleft
  },
  methods:{
    changelist(index){
      this.currentIndex = index;
    }
  },
  data(){
    return {
      currentIndex: 0,
      tabs:[{
        tabName:'三文鱼',
        list:[
            {pic:pic1,name:'三文鱼',price:45,con:'优选三文鱼中段'},
            {pic:pic1,name:'高级三文鱼',price:55,con:'优选三文鱼中段'},
            {pic:pic1,name:'vip三文鱼',price:65,con:'优选三文鱼中段'},
        ]
      },
      { 
          tabName:'刺身',
          list:[
            {pic:pic2,name:'刺身',price:45},
            {pic:pic2,name:'高级刺身',price:55},
            {pic:pic2,name:'vip刺身',price:65},
          ]
        },
        {
          tabName:'大虾',
          list:[
            {pic:pic3,name:'大虾',price:45},
            {pic:pic3,name:'高级大虾',price:55},
            {pic:pic3,name:'vip大虾',price:65},
          ]
        },
        {tabName:"年货礼品区"},
        {tabName:"野生大对虾"},
        {tabName:"冻区货"},
        {tabName:"贝壳类"},
        {tabName:"鲜虾活鱼"},
    ]
    }
  },

}
</script>

<style lang="scss"> 
  *{
    margin: 0;padding: 0;
  }
  .tabs{
  display: flex;
}
</style>